<template>
	<view class="anmed">
		<view class="my-top">
			<image class="header" src="https://xcx.xiaombt.com/img/img/header.png" mode="" :style="{ height: navbarHeight + 'px' }">
			</image>
			<view class="nav">
				<u-navbar title="上传" :autoBack='true' bgColor="transparent" leftIconColor='#6C5D47'
					titleStyle='color:#6C5D47' placeholder>
				</u-navbar>
			</view>
		</view>
		<view class="main" :style="{ marginTop: viewHeight + 'px' }">
			<view class="tab">
				<view class="item" v-for="item in tagList" :key="item.id" @click="tabClick(item)">
					<view class="text">
						{{item.text}}
					</view>
					<view :class="current==item.id?'line':''"></view>
				</view>
			</view>

			<view class="main-list">
				<list></list>

			</view>
			<view class="sub">
				<view class="btn" @click="jumpTo">上传</view>
			</view>
		</view>

	</view>
</template>

<script>
	import list from '@/components/list/index.vue'
	export default {
		data() {
			return {
				viewHeight: null,
				navbarHeight: null,
				current: '1',
				tagList: [{
						id: '1',
						text: '上传资讯内容'
					},
					{
						id: '2',
						text: '上传修订内容'
					},
				]
			};
		},
		components: {
			list
		},
		async onLoad() {



			const query = uni.createSelectorQuery().in(this);
			query.select('.nav').boundingClientRect(data => {
				if (data) {
					this.navbarHeight = data.height;
				}
			}).exec();
			query.select('.my-top').boundingClientRect(data => {
				if (data) {
					this.viewHeight = data.height;
				}
			}).exec();






		},
		methods: {
			tabClick(item) {
				this.current = item.id
			},
			jumpTo(){
				uni.navigateTo({
					url: '/page/chuanForm/index?id='+this.current
				});
				
			}
		}
	};
</script>


<style lang="scss" scoped>
	.sub {
		position: fixed;
		bottom: 5%;
		left: 50%;
		width: 90%;
		z-index: 100;
		transform: translateX(-50%);

		.btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;

			background: url(https://xcx.xiaombt.com/img/img/button.png) no-repeat;
			background-size: 100% 100%;
			color: #FFF;
			font-family: PingFang SC;
			font-size: 36rpx;
			text-align: center;
			margin: 0 auto;
		}
	}

	.anmed {
		width: 100%;
		min-height: 100vh;
		background-color: #F2EFE9;
	}

	.main-list {
		width: 90%;
		padding: 42rpx 0;
		box-sizing: border-box;
		margin: auto;
	}

	.main {
		width: 100%;

		.tab {
			display: flex;
			align-items: center;
			background-color: #fff;
			justify-content: space-between;
			height: 96rpx;

			.item {
				flex: 1;
				height: 100%;
				line-height: 96rpx;
				text-align: center;
				color: rgb(108, 93, 71);
				font-family: 思源黑体;
				font-size: 32rpx;
				font-weight: 400;
				position: relative;

				.line {
					/* 矩形 65 */
					position: absolute;
					width: 64rpx;
					height: 8rpx;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					background: rgb(115, 94, 71);
				}
			}

			.item:nth-of-type(1) {
				border-right: 1rpx solid #F2EFE9;
			}
		}


	}






	.my-top {
		width: 100%;
		background-color: #F2EFE9;
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;

		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.select {
			padding: 20rpx 38rpx;
			background-color: #fff;

			.center {
				width: 100%;
				height: 76rpx;
				position: relative;
				display: flex;
				align-items: center;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

	}
</style>